<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七牛云图片上传测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            padding: 40px;
            max-width: 600px;
            width: 100%;
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 28px;
        }
        
        .upload-area {
            border: 3px dashed #667eea;
            border-radius: 15px;
            padding: 40px;
            text-align: center;
            margin-bottom: 30px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .upload-area:hover {
            border-color: #764ba2;
            background-color: #f8f9ff;
        }
        
        .upload-area.dragover {
            border-color: #764ba2;
            background-color: #f0f2ff;
        }
        
        .upload-icon {
            font-size: 48px;
            color: #667eea;
            margin-bottom: 15px;
        }
        
        .upload-text {
            color: #666;
            font-size: 16px;
            margin-bottom: 10px;
        }
        
        .upload-hint {
            color: #999;
            font-size: 14px;
        }
        
        input[type="file"] {
            display: none;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 5px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .result {
            margin-top: 30px;
            padding: 20px;
            border-radius: 10px;
            display: none;
        }
        
        .result.success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .result.error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .result img {
            max-width: 100%;
            max-height: 300px;
            border-radius: 10px;
            margin-top: 15px;
        }
        
        .loading {
            display: none;
            text-align: center;
            margin-top: 20px;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .file-info {
            margin-top: 15px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 七牛云图片上传测试</h1>
        
        <div class="upload-area" id="uploadArea">
            <div class="upload-icon">📁</div>
            <div class="upload-text">点击或拖拽文件到此处上传</div>
            <div class="upload-hint">支持 JPG、PNG、GIF 等图片格式，最大 10MB</div>
        </div>
        
        <input type="file" id="fileInput" accept="image/*">
        
        <div style="text-align: center;">
            <button class="btn" id="selectBtn">选择文件</button>
            <button class="btn" id="uploadBtn" disabled>开始上传</button>
        </div>
        
        <div class="loading" id="loading">
            <div class="spinner"></div>
            <div>正在上传中，请稍候...</div>
        </div>
        
        <div class="file-info" id="fileInfo" style="display: none;">
            <strong>文件信息：</strong>
            <div id="fileDetails"></div>
        </div>
        
        <div class="result" id="result"></div>
    </div>

    <script>
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const selectBtn = document.getElementById('selectBtn');
        const uploadBtn = document.getElementById('uploadBtn');
        const loading = document.getElementById('loading');
        const result = document.getElementById('result');
        const fileInfo = document.getElementById('fileInfo');
        const fileDetails = document.getElementById('fileDetails');
        
        let selectedFile = null;
        
        // 点击选择文件
        selectBtn.addEventListener('click', () => {
            fileInput.click();
        });
        
        // 文件选择
        fileInput.addEventListener('change', (e) => {
            handleFileSelect(e.target.files[0]);
        });
        
        // 拖拽上传
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });
        
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFileSelect(files[0]);
            }
        });
        
        // 点击上传区域
        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });
        
        // 上传按钮
        uploadBtn.addEventListener('click', () => {
            if (selectedFile) {
                uploadFile(selectedFile);
            }
        });
        
        // 处理文件选择
        function handleFileSelect(file) {
            if (!file) return;
            
            // 验证文件类型
            if (!file.type.startsWith('image/')) {
                showResult('请选择图片文件！', 'error');
                return;
            }
            
            // 验证文件大小 (10MB)
            if (file.size > 10 * 1024 * 1024) {
                showResult('文件大小不能超过 10MB！', 'error');
                return;
            }
            
            selectedFile = file;
            uploadBtn.disabled = false;
            
            // 显示文件信息
            fileDetails.innerHTML = `
                <div>文件名：${file.name}</div>
                <div>文件大小：${formatFileSize(file.size)}</div>
                <div>文件类型：${file.type}</div>
            `;
            fileInfo.style.display = 'block';
            
            // 显示预览
            const reader = new FileReader();
            reader.onload = (e) => {
                uploadArea.innerHTML = `
                    <img src="${e.target.result}" style="max-width: 100%; max-height: 200px; border-radius: 10px;">
                    <div style="margin-top: 15px; color: #666;">${file.name}</div>
                `;
            };
            reader.readAsDataURL(file);
        }
        
        // 上传文件
        async function uploadFile(file) {
            const formData = new FormData();
            formData.append('file', file);
            
            loading.style.display = 'block';
            result.style.display = 'none';
            uploadBtn.disabled = true;
            
            try {
                const response = await fetch('/api/upload/image', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if (data.success) {
                    showResult(`
                        <strong>✅ 上传成功！</strong>
                        <div style="margin-top: 10px;">
                            <div>文件URL：<a href="${data.url}" target="_blank" style="color: #667eea;">${data.url}</a></div>
                            <div>文件名：${data.fileName}</div>
                            <div>文件大小：${formatFileSize(data.fileSize)}</div>
                        </div>
                        <img src="${data.url}" alt="上传的图片">
                    `, 'success');
                } else {
                    showResult(`❌ 上传失败：${data.message}`, 'error');
                }
            } catch (error) {
                showResult(`❌ 网络错误：${error.message}`, 'error');
            } finally {
                loading.style.display = 'none';
                uploadBtn.disabled = false;
            }
        }
        
        // 显示结果
        function showResult(message, type) {
            result.innerHTML = message;
            result.className = `result ${type}`;
            result.style.display = 'block';
        }
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
    </script>
</body>
</html>
